<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqHospitalLevelAndRegion} from '@/api/home/index.ts'
import type {HospitalLevelAndRegionResponseData,HospitalLevelAndRegionDataArr} from '@/api/home/type.ts'
// 定义一个数组存储医院等级数据
let levelArr = ref<HospitalLevelAndRegionDataArr>([])
onMounted(()=>{
  getLevel()
})
//控制医院等级的高亮响应式显示
let activeFlag = ref('')
let $emit = defineEmits(['getLevel'])
const changeLevel=(value:string)=>{
  activeFlag.value=value
  $emit('getLevel',value)
}

// 获取医院等级的数据
const getLevel=async ()=>{
    let result:HospitalLevelAndRegionResponseData= await reqHospitalLevelAndRegion('Hostype')
    if(result.code==200){
      levelArr.value=result.data
    }
}
</script>

<template>
<div class="level">
  <h1>医院</h1>
  <div class="content">
    <div class="l">等级：</div>
    <ul class="hospital">
      <li :class="{active:activeFlag===''}"  @click="changeLevel('')">全部</li>
      <li v-for="level in levelArr" @click="changeLevel(level.value)" :class="{active:activeFlag===level.value}" v-bind:key="level.value">{{level.name}}</li>
    </ul>
  </div>
</div>
</template>

<style scoped lang="scss">
.level{
  color: #7f7f7f;
  margin-bottom: 20px;
  h1{
    font-weight: 900;
    margin: 10px 0;
  }
  .content{
    display: flex;
    .l{
      margin-right: 10px;
    }
    .hospital{
      display: flex;
      li{
        margin-right: 10px;
        &.active{
          color:#55a6fe;
        }
      }
      li:hover{
        color:#55a6fe;
        cursor:pointer;
      }
    }
  }
}
</style>